<template>
    <div class="leetcode-discuss">
        <NavigationBar></NavigationBar>
        <div class="discuss-container">
            <!-- 左侧主内容区 -->
            <div class="main-content">
                <!-- 帖子头部 -->
                <div class="post-header">
                    <div class="post-title-area">
                        <div class="post-tags">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                            </el-breadcrumb>
                            <el-divider></el-divider>
                        </div>
                        <div class="author-avatar-title">
                            <el-popover placement="right" width="300" trigger="hover">
                                <template #reference>
                                    <el-avatar :size="30" :src="post.authorAvatar"></el-avatar>
                                </template>
                                <div class="author-info-header">
                                    <el-avatar :size="60" :src="post.authorAvatar" shape="square"></el-avatar>
                                    <div class="author-info-body">
                                        <span class="author-info-body-item">{{ post.author }}</span>
                                        <span class="author-info-body-item1">社区排名: {{ post.authorRank }}</span>
                                        <!-- <el-tag size="mini" type="warning" v-if="post.isPlus">Plus</el-tag> -->
                                    </div>
                                    <div class="author-info-body">
                                        <span class="author-info-body-item1"><i class="el-icon-location"></i>{{
                                            post.authorIp }}</span>
                                        <span class="author-info-body-item1">TypeScript爱好者小贝一枚</span>
                                    </div>
                                </div>
                                <div class="author-info-footer">
                                    <div class="author-info-item">
                                        <span class="author-info-item-label"> {{ post.likesCount }} </span>
                                        <span class="author-info-item-label">被点赞</span>
                                    </div>
                                    <div class="author-info-item">
                                        <span class="author-info-item-label"> {{ post.readsCount }} </span>
                                        <span class="author-info-item-label">被阅读</span>
                                    </div>
                                    <div class="author-info-item">
                                        <span class="author-info-item-label"> {{ post.collectionsCount }} </span>
                                        <span class="author-info-item-label">被收藏</span>
                                    </div>
                                    <div class="author-info-item">
                                        <span class="author-info-item-label"> {{ post.collectionsCount }} </span>
                                        <span class="author-info-item-label">关注</span>
                                    </div>
                                </div>
                                <div class="author-info-actions">
                                    <el-button class="follow-btn" type="primary" @click="handleFollow">关注</el-button>
                                </div>
                            </el-popover>
                            <h1 class="post-title">{{ post.title }}</h1>
                            <div class="follow-btn1">
                                <el-button round type="primary" @click="handleFollow">关注TA</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="post-meta">
                        <div class="author-info">
                            <span class="author-name">{{ post.author }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>发布于 {{ post.createTime }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span>来自 {{ post.authorIp }}</span>
                        </div>
                    </div>
                </div>
                <!-- 帖子内容 -->
                <div class="post-content markdown-body">
                    {{ post.content }}
                </div>
                <!-- 帖子操作栏 -->
                <div class="post-actions">
                    <div class="action-btns">
                        <el-button type="text" class="action-btn">
                            <i class="el-icon-thumb"></i>
                            <span>赞同</span>
                            <el-divider direction="vertical"></el-divider>
                        </el-button>
                        <el-button type="text" class="action-btn">
                            <i class="el-icon-star-off"></i>
                            <span>收藏</span>
                            <el-divider direction="vertical"></el-divider>
                        </el-button>
                        <el-button type="text" class="action-btn">
                            <i class="el-icon-share"></i>
                            <span>分享</span>
                            <el-divider direction="vertical"></el-divider>
                        </el-button>
                        <el-popover placement="right" width="10" trigger="hover">
                            <div>
                                <el-button size="mini" type="text" @click="handleReport = true">举报</el-button>
                            </div>
                            <el-button icon="el-icon-more" circle slot="reference"></el-button>
                        </el-popover>
                        <el-dialog title="举报" :visible.sync="handleReport" width="50%" :before-close="handleClose">
                            <el-divider></el-divider>
                            <div>
                                <el-radio v-model="radio1" label="1" border @change="handleRadioChange">暴力内容</el-radio>
                                <el-radio v-model="radio1" label="2" border @change="handleRadioChange">谣传传谣</el-radio>
                                <el-radio v-model="radio1" label="3" border @change="handleRadioChange">骚扰广告</el-radio>
                                <el-radio v-model="radio1" label="4" border @change="handleRadioChange">恐怖主义</el-radio>
                            </div>
                            <div class="input-margin">
                                <el-radio v-model="radio1" label="5" border @change="handleRadioChange">违法内容</el-radio>
                                <el-radio v-model="radio1" label="6" border @change="handleRadioChange">政治言论</el-radio>
                                <el-radio v-model="radio1" label="7" border @change="handleRadioChange">黄色内容</el-radio>
                                <el-radio v-model="radio1" label="8" border @change="handleRadioChange">其他内容</el-radio>
                            </div>
                            <div v-if="showInput" class="input-margin">
                                <el-input type="textarea" :rows="4" placeholder="请输入其他内容"
                                    v-model="otherContent"></el-input>
                            </div>
                            <el-divider></el-divider>
                            <span slot="footer" class="dialog-footer">
                                <el-button icon="el-icon-close" circle @click="handleReport = false"></el-button>
                                <el-button type="primary" icon="el-icon-check" circle @click="submitReport"></el-button>
                            </span>
                        </el-dialog>
                    </div>
                    <div>
                        <el-button type="success" plain @click="toggleReply">
                            {{ replyPost ? '关闭回复' : '回复帖子' }}
                        </el-button>
                    </div>
                </div>

                <div v-if="replyPost">
                    <el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="otherContent"></el-input>
                    <div class="reply-actions">
                        <el-checkbox v-model="checked">匿名</el-checkbox>
                        <el-button type="text" icon="el-icon-s-promotion" @click="submitReply">回复</el-button>
                    </div>
                </div>

                <!-- 评论区 -->
                <div class="comments-section">
                    <div class="comments-header">
                        <span class="comments-title">共 {{ post.comments.length }} 条评论</span>
                        <el-button type="text" icon="el-icon-sort" @click="submitReply">最热</el-button>
                    </div>

                    <!-- 评论列表 -->
                    <div class="comments-list">
                        <div v-for="comment in post.comments" :key="comment.id" class="comment-item">
                            <div class="comment-author">
                                <AuthorInfo :author="post.author" :author-avatar="post.authorAvatar"
                                    :author-rank="post.authorRank" :author-ip="post.authorIp"
                                    :likes-count="post.likesCount" :reads-count="post.readsCount"
                                    :collections-count="post.collectionsCount" />
                                <div class="comment-info">
                                    <div class="comment-meta">
                                        <span class="comment-author-name">{{ comment.author }}</span>
                                        <span class="comment-time">{{ comment.time }}</span>
                                    </div>
                                    <div class="comment-content">{{ comment.content }}</div>
                                </div>
                            </div>
                            <div class="comment-actions">
                                <el-button type="text" size="mini">
                                    <i class="el-icon-thumb"></i> {{ comment.likes }}
                                </el-button>
                                <el-button type="text" size="mini">回复</el-button>
                            </div>
                        </div>
                        <el-pagination small layout="prev, pager, next" :total="50">
                        </el-pagination>
                    </div>
                </div>
            </div>

            <!-- 右侧信息栏 -->
            <div class="side-info">
                <!-- 作者信息 -->
                <div class="author-card">
                    <div class="author-header">
                        <span>参与人数</span>
                        <span>1234</span>
                    </div>
                    <div class="author-header">
                        <span>浏览次数</span>
                        <span>1234</span>
                    </div>
                    <div class="author-header">
                        <span>收藏次数</span>
                        <span>1234</span>
                    </div>
                    <el-divider></el-divider>
                    <div class="author-header">
                        <span>相关标签</span>
                    </div>
                    <div class="author-tags">
                        <el-tag>标签一</el-tag>
                        <el-tag type="success">标签二</el-tag>
                        <el-tag type="info">标签三</el-tag>
                        <el-tag type="warning">标签四</el-tag>
                    </div>
                </div>

                <!-- 相关讨论 -->
                <div class="related-posts">
                    <span>相关讨论</span>
                    <el-divider></el-divider>
                    <ul>
                        <li v-for="related in relatedPosts" :key="related.id" class="related-item">
                            <router-link :to="related.link" class="related-title">
                                {{ related.title }}
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import NavigationBar from "@/components/NavigationBar";
import AuthorInfo from './AuthorInfo.vue';

export default {
    name: "ArticleInfo",
    components: {
        NavigationBar,
        AuthorInfo
    },
    data() {
        return {
            checked: true,
            handleReport: false,
            radio1: '',
            showInput: false,
            replyPost: false,
            otherContent: '',
            related: {
                views: 0
            },
            post: {
                title: "Vue3 + TypeScript 工程化实践经验分享, 你值得拥有！",
                author: "前端达人",
                authorAvatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                isPlus: true,
                createTime: "2024-12-20",
                content: "目前中大硕士研二在读，本科是重邮。读研后发过做过一点研究工作，现在投了一个会议没出结果，毕业肯定是没问题。其他时间都在做项目，项目内容偏视觉算法复现还有一些简单的机器人控制。但是感觉学的这些真的没有什么对口工作能找。目前AI领域研究风向早已转向大模型，组里面现在想往具身智能转，但是也看不到什么出路。现在就想找实习工作，可惜的是目前只有python用的熟一点，其他语言只能说了解会简单的语法。想问问大家我这种能找到对口工作吗？如果转开发应该往哪个方向好一点？谢谢大家...",
                likes: 128,
                collects: 56,
                views: 1234,
                authorRank: "9999+",
                authorIp: '广州',
                likesCount: 1234,
                readsCount: 567,
                collectionsCount: 987,
                authorStats: {
                    solved: 856,
                    submissions: 1234,
                    posts: 42
                },
                comments: [
                    {
                        id: 1,
                        author: "TypeScript爱好者",
                        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                        content: "写得很好，特别是关于类型推导的部分很有帮助！",
                        time: "2小时前",
                        likes: 12
                    },
                    {
                        id: 2,
                        author: "Vue学习者",
                        avatar: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                        content: "请问composition API的最佳实践是怎样的？",
                        time: "1小时前",
                        likes: 5
                    }
                ]
            },
            relatedPosts: [
                {
                    id: 1,
                    title: "Vue3性能优化实战, 你值得拥有！",
                    views: 2341,
                    link: "/discuss/1"
                },
                {
                    id: 2,
                    title: "TypeScript高级技巧分享",
                    views: 1876,
                    link: "/discuss/2"
                }
            ]
        }
    },
    methods: {
        submitReply() {
            this.$message({
                message: '回复成功！',
                type: 'success'
            });
        },
        toggleReply() {
            this.replyPost = !this.replyPost;
        },
        handleRadioChange(label) {
            this.showInput = label === '8';
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        submitReport() {
            if (this.radio1 === '8' && !this.otherContent) {
                this.$message.error('请输入其他内容');
                return;
            }
            // 这里可以添加提交举报的逻辑
            console.log('举报内容:', this.radio1);
            if (this.radio1 === '8') {
                console.log('其他内容:', this.otherContent);
            }
            this.handleReport = false;
        },
        handleFollow() {
            this.$message({
                message: '关注成功！',
                type: 'success'
            });
        }
    }
}
</script>

<style scoped>
.input-margin {
    margin-top: 20px;
    /* 调整这个值来改变间距 */
}

.leetcode-discuss {
    background-color: fff;
    min-height: 100vh;
}

.discuss-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 20px;
}

.main-content {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.post-header {
    margin-bottom: 24px;
}

.post-title-area {
    margin-bottom: 16px;
}

.post-tags {
    margin-bottom: 5px;
    /* background: blue; */
    /* height: 30px; */
}

.post-tags .el-tag+.el-tag {
    margin-left: 8px;
}

.post-title {
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.4;
    /* background: blue; */
}

.post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8c8c8c;
    font-size: 13px;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-content {
    font-size: 15px;
    line-height: 1.8;
    color: #262626;
    margin: 20px 0;
}

.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.action-btns {
    display: flex;
    gap: 4px;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.comments-section {
    margin-top: 20px;
}

.comments-header {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    /* background: blue; */
    border-bottom: 1px solid #f0f0f0;
}

.comment-item {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #f0f0f0;
}

.comment-author {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.comment-info {
    flex: 1;
}

.comment-meta {
    margin-bottom: 4px;
}

.comment-author-name {
    font-weight: 500;
    margin-right: 8px;
}

.comment-time {
    color: #8c8c8c;
    font-size: 12px;
}

/* 右侧样式 */
.side-info>* {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    border: 2px solid #f2f2f2;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.author-card {
    text-align: center;
}

.author-header {
    display: flex;
    gap: 160px;
    margin-bottom: 16px;
    /* background: beige; */
}

.author-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.author-stats {
    display: flex;
    justify-content: space-around;
    padding: 16px 0;
    border-top: 1px solid #f0f0f0;
}

.related-posts ul {
    list-style: none;
    padding: 0;
}

.related-item {
    padding: 10px;
    margin: 5px 0;
    background: white;
    background-color: white;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.related-item:hover {
    background-color: #f0f0f0;
    /* 鼠标悬停时的背景颜色 */
}

.related-title {
    color: #262626;
    text-decoration: none;
    font-size: 14px;
}


.related-meta {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 4px;
}

.author-avatar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    /* background: blue; */
    /* padding: 5px; */
}

.author-info-header {
    display: flex;
    gap: 8px;
}

.author-info-footer {
    display: flex;
    justify-content: space-around;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    /* background: #8c8c8c; */
}

.author-info-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 110px;
}

.author-info-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.author-info-item-label {
    font-size: 12px;
    /* font-weight: bold; */
    color: #100d0d;
    display: flex;
    justify-content: center;
}

.author-info-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    /* float: right; */
    gap: 8px;
    height: 40px;
    padding-top: 10px;
}

.follow-btn {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    /* background: rgb(5, 126, 239); */
}

.author-info-body-item {
    font-size: 14px;
    font-weight: bold;
    color: #100d0d;
}

.author-info-body-item1 {
    font-size: 12px;
    /* font-weight: bold; */
    color: #100d0d;
}

.reply-actions {
    right: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background: blue; */
    border-bottom: 1px solid #f0f0f0;
    /* 添加下边框 */
}

.reply-actions .el-checkbox {
    margin-right: 10px;
}

@media (max-width: 768px) {
    .discuss-container {
        grid-template-columns: 1fr;
    }
}
</style>